<script setup lang="ts">
import type { GoodsItemType } from '@/types/goods'

type PropsType = {
  list: GoodsItemType[]
}
const baseURL = import.meta.env.VITE_BASE_URL
const props = defineProps<PropsType>()
</script>

<template>
  <ProductShowTitle v-bind="$attrs" />

  <div class="mt-5 grid grid-cols-4 gap-6 gap-row-15">
    <div v-for="item in list" class="w-full transition-duration-150 hover:mt-0">
      <div
        class="w-full h-380px cursor-pointer"
        @click="$router.push(`/item/${item.id}`)"
        :style="{
          backgroundImage: `url(${baseURL + item.cover})`,
          backgroundSize: 'cover',
          backgroundPosition: 'top left',
          backgroundRepeat: 'no-repeat'
        }"
      ></div>
    </div>
  </div>
</template>

<style scoped></style>
